// components/card/card.ts
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    navItem: {
      type: Array,
    },
    currentNav: {
      type: Number
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    isShowDialog: false as boolean,
    focus: true as boolean,
    groupFocus: false as boolean,
    perFocus: false as boolean,
    units: [
      "kg",
      "lb"
    ],
    unit: [0],
    unitValue: "kg",
    isWeightEmpty: false as boolean,
    isGroupEmpty: false as boolean,
    isPerEmpty: false as boolean,
    group: null as number | null,
    weight: null as number | null,
    per: null as number | null,
    animationData: {},
    exerciseName: '' as string, //当前点击的卡片名称
    exerciseMoveId: null as number | null,
    animationClass: "" as string,// 动画类名
    showAnimation: false as boolean,
  },

  /**
   * 组件的方法列表
   */
  methods: {
    showDialog(e: any): void {
      console.log(e, "e")
      this.setData({
        isShowDialog: true,
        exerciseName: e.currentTarget.dataset.item.name,
        exerciseMoveId: e.currentTarget.dataset.item.id,
        animationClass: '',
      })
    },
    // 点击取消
    closeDialog(): void {
      this.reset();
    },
    // 点击确定
    handleTap(): void {
      if (this.data.group && this.data.weight && this.data.per) {
        const formdata: FormData = {
          weight: this.data.weight,
          group: this.data.group,
          per: this.data.per,
          exerciseAreaId: this.properties.currentNav + 1,
          exerciseName: this.data.exerciseName,
          unit: this.data.unitValue,
          exerciseMoveId: this.data.exerciseMoveId
        }
        this.triggerEvent("sendData", formdata)
        this.setAnimation();// 完成的动画
      } else {
        if (!this.data.group) {
          this.setData({
            isGroupEmpty: true
          })
        }
        if (!this.data.weight) {
          this.setData({
            isWeightEmpty: true,
          })
        }
        if (!this.data.per) {
          this.setData({
            isPerEmpty: true
          })
        }
      }
    },
    // 聚焦时设置动画
    handleFocus(): void {
      this.setData({
        focus: true,
        borderWidth: 200,
      });
    },
    handleBlur(): void {
      this.setData({
        focus: false,
      });
    },
    handleGroupFocus(): void {
      this.setData({
        groupFocus: true,
      })
    },
    handleGroupBlur(): void {
      this.setData({
        groupFocus: false,
      })
    },
    handlePerFocus(): void {
      this.setData({
        perFocus: true,
      })
    },
    handlePerBlur(): void {
      this.setData({
        perFocus: false,
      })
    },
    // 更换单位
    changeUnit(e: any): void {
      const val = e.detail.value;
      this.setData({
        unit: val,
        unitValue: this.data.units[val[0]]
      })
    },
    handleInput(e: any): void {
      if (!e.currentTarget.dataset.type) {
        this.setData({
          weight: e.detail.value * 1
        })
      } else if (e.currentTarget.dataset.type === 1) {
        this.setData({
          group: e.detail.value * 1
        })
      } else {
        this.setData({
          per: e.detail.value * 1
        })
      }
    },
    // 重置
    reset(): void {
      this.setData({
        animationClass: 'dialog-shrink'
      });
      let timer = setTimeout(() => {
        clearTimeout(timer);
        this.setData({
          isShowDialog: false,
          isGroupEmpty: false,
          isWeightEmpty: false,
          isPerEmpty: false,
          weight: null,
          group: null,
          per: null,
          unitValue:"kg",
          unit: [0],
          focus: true,
          animationClass:""
        })
      }, 400)
    },
    setAnimation(): void {
      this.setData({
        animationClass: 'dialog-shrink'
      });
      let timer = setTimeout(() => {
        clearTimeout(timer);
        this.setData({
          showAnimation: true,
          isShowDialog: false,
          animationClass: ""
        })
        let timerCircle = setTimeout(() => {
          clearTimeout(timerCircle);
          // 触发自定义事件
          this.triggerEvent("changeNumber")
          wx.showToast({
            title: "添加成功",
            icon: "success"
          })
          this.setData({
            showAnimation:false,
            isShowDialog: false,
            isGroupEmpty: false,
            isWeightEmpty: false,
            isPerEmpty: false,
            weight: null,
            group: null,
            per: null,
            unitValue:"kg",
            unit: [0],
            focus: true,
            animationClass:""
          })
        }, 2000)
      }, 400)
    }
  }
})
